<template>
    <div class="index">
        <el-config-provider :size="allSize" :locale="language">
            <el-container>
                <el-aside width="auto">
                    <el-scrollbar max-height="100vh">
                        <leftMenu :collapse="isCollapse"></leftMenu>
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <el-header>

                        <div class="header-box">
                            <div class="breadcrumbNav-box">
                                <!-- 面包屑 -->
                                <div class="breadcrumbNav">
                                    <div class="headerIcon" :title="!isCollapse ? '收起菜单' : '展开菜单'"
                                        @click="isCollapse = !isCollapse">
                                        <el-icon :style="{ transform: ' rotate(' + (isCollapse ? -180 : 0) + 'deg)' }">
                                            <component is="Expand" color="#ababab"></component>
                                        </el-icon>
                                    </div>
                                    <breadCrumb></breadCrumb>
                                </div>
                                <!-- 右边操作栏 -->
                                <div class="headerRight">
                                    <rightIcon @setSize="getSize" @refresh="isrefresh"></rightIcon>
                                    <!-- 头像 -->
                                    <div class="avatar">
                                        <avatar></avatar>
                                    </div>
                                </div>
                            </div>
                            <!-- 标签页 -->
                            <headerTabs @refresh="isrefresh"></headerTabs>
                        </div>
                    </el-header>
                    <el-main style="height: calc(100vh - 12vh)">
                        <router-view v-if="isShow"></router-view>
                        <div v-if="!isShow">页面加载中...</div>
                    </el-main>
                </el-container>
            </el-container>
        </el-config-provider>
    </div>
</template>


<script lang="ts" setup>
import leftMenu from '@/components/menu/LeftMenu.vue'//左侧菜单栏组件
import breadCrumb from '@/components/header/breadcrumb.vue'//面包屑组件
import headerTabs from '@/components/header/headerTabs.vue'//标签页组件
import avatar from '@/components/header/avatar.vue'//头像组件
import rightIcon from '@/components/header/rightAction.vue'//头像组件
import { computed, ref, onMounted } from 'vue'

import en from "element-plus/lib/locale/lang/en"; //英文
import zh from "element-plus/lib/locale/lang/zh-cn"; //中文

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const language = computed(() => (locale.value === 'zh' ? zh : en))

var isCollapse = ref(false)//是否收起菜单
var isShow = ref(true)//是否刷新
var allSize = ref('')//全局组件大小

let width = ref(window.innerWidth)
/**
 * 组件自定义事件
 * @param isrefresh 刷新事件
 * @param getSize 组件大小
 *  @param getLanguage 语言
 */
const isrefresh = (backStatus: boolean) => {
    isShow.value = backStatus
}
const getSize = (v: any) => {
    allSize.value = v.backStatus
    console.log('组件大小', allSize.value);
}

/**
 * 窗体大小改变事件
 */
window.onresize = () => {
    width.value = window.innerWidth
    if (width.value < 800) {
        isCollapse.value = true
    } else {
        isCollapse.value = false
    }
}
onMounted(() => {
    if (width.value < 600) {
        isCollapse.value = true
    }
})
</script>


<style lang="less" scoped>
.avatar {
    padding-top: 3px;
}

.breadcrumbNav-box {
    display: flex;
    justify-content: space-between;
}

.headerRight {
    margin-right: 1.5vw;
    display: flex;
}

.breadcrumbNav {
    display: flex;
    height: 5vh;
    padding-left: 2vw;

    .headerIcon {
        line-height: 5.9vh;
        padding-right: 20px;
    }
}

.index {
    width: 100%;
    overflow: hidden;
}

.el-header {
    // background-color: rgb(232, 169, 206);
    width: 100%;
    color: white;
    height: 10.5vh;
    padding: 0%;
}

.el-aside {
    background-color: #304156;
    color: #333;
    height: 100vh;
}

.el-main {
    color: #333;
    padding: 0%;
    height: 89vh;
    overflow: auto;
    // width: 88vw;
}
</style>